<template>
  <div class="container" v-loading="loading" element-loading-text="拼命载入中">
     <div class="tableTool">
            <el-tooltip content="导出" placement="top" effect="dark">
                <download-excel
                    class="downExcel"
                    type="xls"
                    :data="tableData"
                    :fields="tableDataFieldsFn"
                    :name="occurredTime+label+'.xls'">
                    <el-button
                        class="btnExport"
                        icon="el-icon-jk-export">
                    </el-button>
                </download-excel>
            </el-tooltip>
        </div>
    <div style="margin-top:15px">
      <el-table :data="tableData" :fit="true" style="width: 100%">
        <el-table-column align="center"  :label="label+'--总数:'+tableTotal+'项'">
          <template v-for="item in tableColumns">
            <el-table-column  align="center" :key="item.prop" :prop="item.prop" :label="item.label">
            </el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>

import { getHistoryDataServerUsage } from "@/api/index.js";
import tableColumns from "./ServerUseTableColumns.js";
import moment from "moment";
export default {
  props: ["propData", "propIP"],
  data() {
    return {
      label:this.propIP +(this.propData.type == 'cpu'?'CPU':'内存')+ "负载"+"大于"+ this.propData.fre+"%小于"+this.propData.fre2+ "%的情况",
      tableData: [],
      tableColumns:tableColumns,
      loading:false,
      tableTotal:0,
      occurredTime:moment(this.propData.time).format("YYYY年MM月DD日HH时mm分ss秒")+'至'+moment(this.propData.time2).format("YYYY年MM月DD日HH时mm分ss秒"),
    };
  },
  computed: {
    tableDataFieldsFn() {
      let _jsonfields = {};
      this.tableColumns.filter((item) => {
        if (item.isShow) {
          _jsonfields[item.label] = item.prop;
        }
      });

      return _jsonfields;
    },
  },
  created() {},
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      this.loading = true;
      getHistoryDataServerUsage(this.propData).then((res) => {
        let data = Object.values(res)[0].map((item) => {
          return {
            Team: item.recordTime,
            Shotconceded: String(item.avgCpuUsed||item.avgMemoryUsed),
          };
        });
        this.tableTotal = Object.keys(res)[0]
        this.tableData = data;
        this.loading = false;
      });
    },
  },
};
</script>

<style scope>
.tableTool {
  float: right;
  margin-bottom: 15px;
}
.tableTool .btnLie {
  margin-right: 10px;
}
.tableTool .downExcel {
  display: inline-block;
}
    
</style>


